<template>
<div class="oppo">
  <div class="top">
    <input type="text" placeholder="OPPO A3"> &emsp;&emsp;
    <button>登录</button>
  </div>
  <br><br><br><br>
  <div class="center">
    <img src="@/assets/10.jpg" alt="" class="img">
    <br><br><br><br><br><br><br>
    <dl>
      <dt><img src="@/assets/11.jpg" alt=""></dt>
      手机
    </dl>
    &emsp;&emsp;
    <dl>
      <dt><img src="@/assets/15.jpg" alt=""></dt>
      平板
    </dl>
    <dl>
      <dt><img src="@/assets/17.webp" alt=""></dt>
      穿戴
    </dl>
    <dl>
      <dt><img src="@/assets/22.jpg" alt=""></dt>
      声学
    </dl>
    <dl>
      <dt><img src="@/assets/33.jpg" alt=""></dt>
      配件
    </dl>
    <br><br><br><br><br>
    <img src="@/assets/壁纸5.png" alt="" class="img">
    <br><br><br><br><br><br><br><br><br>
    <h3>手机专区</h3>
  </div>
  
</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
*{
  padding: 0;
  margin: 0;
  float: left;
}
.oppo{
  text-align: center;
  width: 100%;
  height: 100%;
}
.img{
  width: 25rem;
  height: 7.275rem;
}
dl{
  width: 6.25rem;
  height: 3.125rem;
  
}
dl dt{
  width: 6.25rem;
  height: 3.125rem;
  float: left;
}
dl dt img{
  width: 6.25rem;
  height: 3.125rem;
  border-radius: 1.25rem;
}
</style>
